import styles from './index.less';
import { Layout, Card, Tabs, Button } from 'antd';
const { Header, Content, Sider } = Layout;
import { DndProvider } from 'react-dnd';
import {
  DesignBar,
  Aside,
  TreeComponent,
  SelectComponentsPanel,
  PropsPanel,
} from '@/components';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { connect } from 'react-redux';
import React, { memo, useCallback, useEffect, useState } from 'react';
import { CodePanel } from '@/components';

function IndexPage({ project, getComponentsList, asyncPageConfig, save }: any) {
  const { pageConfig, componentList, mode } = project;
  useEffect(() => {
    getComponentsList();
    window.document.body.addEventListener('click', (e) => {
      save({
        isShowPropsPanel: false,
      });
    });
  }, []);

  return (
    <DndProvider backend={HTML5Backend}>
      <Layout
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        }}
      >
        <Header className={styles.siteBackground}>
          <Button
            type="primary"
            className={styles.saveBtn}
            onClick={() => asyncPageConfig(project)}
          >
            保存
          </Button>
        </Header>
        <Layout>
          <Aside />
          <Content className={styles.content}>
            <DesignBar />
            <div style={{ display: mode === 'design' ? 'block' : 'none' }}>
              <TreeComponent
                tree={pageConfig}
              />
            </div>
            <SelectComponentsPanel />
            <PropsPanel />
            <CodePanel
              style={{ display: mode === 'code' ? 'block' : 'none' }}
            />
          </Content>
        </Layout>
      </Layout>
    </DndProvider>
  );
}

export default memo(
  connect(({ project }: any) => ({ project }), {
    getComponentsList: () => ({ type: 'project/getComponentsList' }),
    asyncPageConfig: (payload: any) => ({
      type: 'project/asyncPageConfig',
      payload,
    }),
    save: (payload: any) => ({ type: 'project/save', payload }),
  })(IndexPage),
);
